<!DOCTYPE html>
<html lang="en">

<head>


	<style type="text/css">
		.info {
			display: flex;
			font-size: 30px;
		}

		.result {
			background-color: aquamarine;
			height: 100px;
		}

		.img {
			margin: 30px auto;
		}
	</style>
</head>

<body>
	<div class="app">
		<div class="info">
			<div class="res">结果</div>
			<div class="option">
				<button class="jie" onclick="jietu()">截图</button>
				<button class="setting">设置</button>
			</div>
		</div>

		<div class="result">
			hello world ！！！
		</div>
		<button onclick="out()">复制并退出</button>
	</div>

	<div>
		<h3>上传图片</h3>
		<form method="post" action="http://localhost:8080/upload" enctype="multipart/form-data">
			上传文件:<input type="file" name="file"><br>
			<input type="submit" value="提交">
		</form>
		<h3>显示图片</h3>
		<!-- <img src="http://localhost:8100/public/keda.jpg"> -->
	</div>

	<div class="img">
		<input type="file" accept="image/*" onchange="changeFile(this)" />
		<button onclick="img()">上传</button>
	</div>
	<script src="/jquery-3.4.1.js"></script>
	<script>
		let fileImg = null;
		function changeFile(inputDom) {
			fileImg = inputDom.files[0];
		}
		function img() {
			console.log(fileImg);
			if (fileImg == null) {
				return;
			}
			var fd = new FormData();//创建一个向后端传输的formdata
			fd.append("img", fileImg, fileImg.name);
			$.ajax("http://localhost:8080/img", {
				/* headers: {
					'Content-Type': 'multipart/form-data'
				}, */
				contentType: false,
				// 告诉jQuery不要去设置Content-Type请求头
				processData: false,
				// 告诉jQuery不要去处理发送的数据
				method: "post",
				data: {
					img: fd
				},
				success: res => {
					console.log(res);
				}
			})
		}

	</script>
	<script>

		// 请求地址
		const url = "https://openapi.youdao.com/ocrapi"
		// 应用ID
		const appKey = "6e7e919ff67cf9ba"
		// 应用密钥
		const appSecret = "0bgTHDY5SYNvH9v5bQqwtRQ6Pl9b12og"

		const langType = "auto"
		const detectType = "10012"
		const imageType = "1"
		const docType = "json"

		const signType = "v3"
		// 随机字符串,最好是UUID,和curtime一起防请求重放
		const salt = ""
		const curtime = ""
		const sign = ""

		// 获取屏幕截图
		function jietu() {
			console.log("jietu");
			utools.screenCapture(base64Str => {
				// utools.redirect('识别图片中文字', { type: 'img', data: base64Str })
				/* post(url, {
					
				}) */
			})
		}
		// 复制并退出
		function out() {
			utools.outPlugin();
		}
		/* window.$.post("http://localhost:8083/img", res => {
			console.log(res);
		}) */
	</script>

</body>

</html>